<template>
    <div class="header">
        <div class="top-box">
            <div class="top-left">
                <el-input :prefix-icon="Search" placeholder="站内搜索"/>
            </div>
            <div class="top-right">
                <!-- 消息 -->
                <div class="msg">
                    <el-tooltip
                        class="box-item"
                        content="消息"
                        effect="dark"
                        placement="bottom"
                    >
                        <el-icon><Bell /></el-icon>
                    </el-tooltip>
                </div>
                <!-- 用户头像 -->
                <div class="user">
                    <el-tooltip
                        class="box-item"
                        content="用户"
                        effect="dark"
                        placement="bottom"
                    >
                        <el-icon><UserFilled /></el-icon>
                    </el-tooltip>
                </div>
                <!-- 操作 -->
                <div class="option">
                    <el-dropdown trigger="click">
                        <span class="el-dropdown-link">
                            欢迎您
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </div>
        <div class="welcome-box">
            <div class="we-text"><span>{{ helloText }}</span>！<span>{{ userStore.userName }}</span></div>
            <div class="sub-text">Welcome back! <SvgIcons class="happy" name="happy" /></div>
        </div>
    </div>
</template>
<script lang="ts" setup>
//引入elementPlus图标
import { Search, Bell,UserFilled,ArrowDown } from '@element-plus/icons-vue'
//引入cookie
import { removeCookie } from "@/utils/cookie";
//路由
const router = useRouter();
//引入Pinia
import useUserStore from '@/store/user.ts';
//引入工具方法
import { getCurrentTimeText } from "@/utils/tools";
//定义存储信息
const userStore: any = useUserStore();
//定义问候语文本
let helloText = ref('');
//退出登录
const logout = () => {
    removeCookie('userName');
    removeCookie('userId');
    removeCookie('loginName');
    router.push('/login');
}

onMounted(() => {
    setInterval(() => {
        helloText.value = getCurrentTimeText();
    }, 1000);
});
</script>
<style lang="scss" scoped>
.header {
    width: 100%;
    height: 100%;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
    .top-box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #EDEDED;
        .top-left {
            padding-left: 20px;
        }
    }
    .welcome-box {
        width: 100%;
        height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 20px;
        .we-text {
            font-size: 16px;
            margin-bottom: 5px;
            font-family: 'SourceHanSansCNRegular';
        }
        .sub-text {
            display: flex;
            flex-direction: row;
            align-items: center;
            color: #b5b5b5;
            .happy {
                width: 18px;
                height: 18px;
                margin-left: 5px;
            }
        }
    }
}
.happy.svg-icons :deep(svg)  {
    width: 18px;
    height: 18px;
}
.top-left :deep(.el-input__wrapper) {
    border: none;
    background: #F5F5F5;
    box-shadow: none;
}
.top-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-right: 20px;
    .msg,
    .user {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 30px;
        margin-right: 15px;
        font-size: 16px;
        border-radius: 4px;
        transition: all 0.3s;
        cursor: pointer;
        background: #f5f5f5;
        color: #999;
    }
    .msg:hover,
    .user:hover {
        background: rgb(242 243 245 / 100%);
        color: rgb(0 82 217 / 100%);
    }
    .option {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: auto;
        height: 32px;
        .el-dropdown-link {
            cursor: pointer;
        }
    }
}
</style>